import 'package:boss/textStyle/text_style.dart';
import 'package:boss/ui/page/miniProgram/miniProgramQrConfig/mini_program_qr_config_page.dart';
import 'package:boss/ui/page/miniProgram/miniProgramSeatConfig/modal/batch_plus_seat_modal.dart';
import 'package:boss/ui/widget/alert/alert.dart';
import 'package:boss/ui/widget/button/fixed_bottom_double_btn.dart';
import 'package:boss/ui/widget/button/radius_button.dart';
import 'package:boss/ui/widget/center_title_app_bar.dart';
import 'package:boss/ui/widget/image/base_image.dart';
import 'package:boss/ui/widget/label_button.dart';
import 'package:boss/ui/widget/shadow_radius_card.dart';
import 'package:flutter/material.dart';
import 'package:hi_common/hi_common.dart';
import 'package:router/annotation.dart';
import 'package:boss/ui/widget/radioList/radio.dart' as radio;

@RouterConfig(MiniProgramSeatConfigPage.pageName)
class MiniProgramSeatConfigPage extends StatefulWidget {
  static const pageName = '/MiniProgramSearConfigPage';

  @override
  _MiniProgramSeaTConfigPageState createState() => _MiniProgramSeaTConfigPageState();
}

class _MiniProgramSeaTConfigPageState extends BaseState<MiniProgramSeatConfigPage> {
  _MiniProgramSeaTConfigPageState() : super(MiniProgramSeatConfigPage.pageName);

  bool isEditing = false;

  String get actionText => isEditing ? '取消' : '编辑';

  int stepView = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CenterTitleAppBar(
        title: '选择要生成的座位',
        actions: [
          if (stepView == 1)
            LabelButton(
              title: actionText,
              padding: EdgeInsets.symmetric(horizontal: 2, vertical: 1),
              onTap: editSeat,
            )
        ],
      ),
      body: buildContent(),
    );
  }

  buildEmpty() {
    return Center(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('您还没有添加座位', style: TextStyleConstant().normal_3_22),
          RadiusButton(
            title: '批量添加座位',
            margin: EdgeInsets.only(top: 10.w),
            onTap: openBatchPlusSeat,
          ),
        ],
      ),
    );
  }

  buildContent() {
    return Column(
      children: [
        Expanded(
          child: Column(
            children: [
              buildHeader(),
              buildSeatList(),
            ],
          ),
        ),
        buildFooter(),
      ],
    );
  }

  Widget buildHeader() {
    return Container(
      height: 90.w,
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(left: 30.w),
      child: Text('扫码点餐座位', style: TextStyleConstant().normal_1_36),
    );
  }

  Widget buildSeatList() {
    return Expanded(
      child: GridView.builder(
        padding: EdgeInsets.symmetric(horizontal: 30.w, vertical: 20.w),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
          childAspectRatio: 3 / 2,
        ),
        itemBuilder: (context, index) {
          return buildSeatItem();
        },
        itemCount: 20,
      ),
    );
  }

  Widget buildSeatItem() {
    return Stack(
      children: [
        Padding(
          padding: EdgeInsets.all(10.w),
          child: ShadowRadiusCard(
            width: double.infinity,
            height: double.infinity,
            padding: EdgeInsets.symmetric(horizontal: 20.w),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Text('1', style: TextStyleConstant().normal_1_28),
                Text('1码', style: TextStyleConstant().origin_22),
              ],
            ),
          ),
        ),
        if (!isEditing) buildSeatItemBadge('assets/image/select_blue_icon.png'),
        if (isEditing) buildSeatItemBadge('assets/image/close_icon.png', onTap: deleteSeat),
      ],
    );
  }

  Widget buildSeatItemBadge(String icon, {VoidCallback onTap}) {
    return Positioned(
      top: 0,
      right: 0,
      child: GestureDetector(
        onTap: onTap,
        behavior: HitTestBehavior.translucent,
        child: Padding(
          padding: EdgeInsets.only(left: 4, bottom: 4),
          child: BaseImage(
            icon,
            width: 30.w,
            height: 30.w,
          ),
        ),
      ),
    );
  }

  buildFooter() {
    return stepView == 0
        ? FixedBottomDoubleBtn(
            first: '继续批量添加',
            second: '完成，去定制',
            onFirst: openBatchPlusSeat,
            onSecond: nextPage,
          )
        : Container(
            height: 120.w + MediaQuery.of(context).padding.bottom,
            padding: EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom, left: 30.w, right: 30.w),
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [DEFAULT_SHADOW],
            ),
            child: Row(
              children: [
                Container(
                  margin: EdgeInsets.only(right: 30.w),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Row(
                        children: [
                          radio.Radio(),
                          Container(
                            child: Text(
                              '全选',
                              style: TextStyleConstant().normal_1_28,
                            ),
                            margin: EdgeInsets.only(left: 15.w),
                          ),
                        ],
                      ),
                      Container(
                        child: Text(
                          '已选中0个座位',
                          style: TextStyleConstant().normal_3_22,
                        ),
                        margin: EdgeInsets.only(left: 5.w, top: 5.w),
                      ),
                    ],
                  ),
                ),
                Expanded(child: RadiusButton(title: '下一步，定制二维码', onTap: nextPage))
              ],
            ),
          );
  }

  openBatchPlusSeat() async {
    final number = await showBatchPlusSeatModal(context);
    if (number != null) {
      print(number);
    }
  }

  editSeat() {
    setState(() {
      isEditing = !isEditing;
    });
  }

  void deleteSeat() {
    showAlert(
      context,
      content: '确定删除该座位？',
      onConfirm: (context) {
        Navigator.pop(context);
      },
      onCancel: (context) {},
    );
  }

  void nextPage() {
    switch (stepView) {
      case 0:
        setState(() {
          stepView++;
        });
        break;
      default:
        Navigator.pushNamed(context, MiniProgramQrConfigPage.pageName);
    }
  }
}
